<template>
    <div class="main">
        <div class="binding_bankcard" style="margin-top: 12px">
            <div class="bjcl_fff wh_100" style="margin-bottom: 30px;">
                <Labelinput :placeholder="nameText" :labelcopy="'持卡人'"  :cbfn="namecbfn" @nametrigger="changeName" :isrealname="isrealname" :value="nameText"></Labelinput>
                <Labelcells :labelcopy="'开户银行'" :placeholder="'选择开户银行'" :cbfn="'slecttrigger'" @slecttrigger="bankPicker" :selectvalue="selectValue" :showplaceholder="showPlaceholder" :showrightico="true"></Labelcells>
                <Labelinput :placeholder="'请输入银行卡号'" :labelcopy="'银行卡号'" :inptype="'tel'" :cbfn="cardcbfn" @cardtrigger="changeCard" :maxlength="37"></Labelinput>
            </div>
            <Confimbtn :copy="'保 存'" :disablebtn="disablebtn" :cbfn="bindcbfn" @confimtrigger="bindSublimt"></Confimbtn>
        </div>
    </div>
    <!-- 组件的模板 -->
        
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    import * as util from 'js/util.js'
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import safety from 'gapi/safety.js'
    import * as common  from 'js/common.js'
    import clientUi from 'gapi/clientUi.js'
    // import ApiClientUi from 'clientApi/ApiClientUi.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    import Labelinput from 'components/Labelinput/Labelinput'
    import Labelcells from 'components/Labelcells/Labelcells'
    import Confimbtn from 'components/Confimbtn/Confimbtn'
    /**
     *  组件实例对象
     */
    export default {
        components: {
            Labelinput,
            Confimbtn,
            Labelcells
        },
        data: function(){
            return{
                disablebtn:true,
                bindcbfn:'confimtrigger',
                namecbfn:'nametrigger',
                cardcbfn:'cardtrigger',
                selectValue:'',
                showPlaceholder:true,
                bankList:[],
                bankUserName:'',
                bankNum:'',
                valChange:'',
                bindType:'bank',
                select: [0],
                nameText: '务必与绑定银行卡姓名一致',
                isrealname: false,
                real_name_auth:false
            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                let real_name = util.getUrddataString('real_name')
                // if(real_name != '' && real_name != undefined && real_name != 'null'){
                //     this.bankUserName = real_name
                //     this.nameText = real_name
                //     this.isrealname = true
                // }else{
                //     this.isrealname = false
                // }
                this.myInitInfoAjax();  
                util.ajax({
                    url:'/wallet/bank_list/get',
                    type:'GET',
                    data:{},
                    timeout:10000,
                    success:(data) => {
                        commonPage.loadPageStatus('loadSuccess')
                        if(data.errno == 0){
                            
                            this.bankList = data.data
                        }else{
                            widget.toast(data.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
               
            },
            /*初始化个人头像及姓名*/
            myInitInfoAjax (){
                util.ajax({
                    url:'/user/info',
                    type:'GET',
                    data:{
                        team_id:0,
                        project_id:0
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(JSON.stringify(obj))
                        if(obj&&obj.errno == 0){
                            this.bankUserName = obj.data.real_name
                            this.nameText = obj.data.real_name
                            this.isrealname=obj.data.real_name_auth;
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            bindSublimt(){
                if(!this.isrealname){
                    widget.toast("请先去完成签约和实名认证");
                    return false;
                }
                this.disablebtn = true;
                let num = /^\d*$/;
                if(!num.exec(this.bankNum)) {
                    widget.toast("银行卡号必须全为数字");
                    return false;
                }
                commonPage.loadPageStatus('loading')                
                util.ajax({
                    url:'/wallet/bind',
                    type:'POST',
                    data:{
                        account: this.bankNum ,
                        account_type: 3,
                        account_plus: this.selectValue,
                        name: this.bankUserName,
                    },
                    timeout:10000,
                    success:(data) => {
                        commonPage.loadPageStatus('loadSuccess')
                        this.disablebtn = false;
                        if(data.errno == 0){
                            widget.toast('绑定成功')
                            let encodeStr = encodeURIComponent(`last_pageUrl=3`)
                            location.href = `dmsaas://ApplyforWithdrawal?urdData=${encodeStr}`
                        }else{
                            widget.toast(data.errmsg)
                        }
                    },
                    error:function(status){
                        commonPage.loadPageStatus('loadSuccess')
                        this.disablebtn = false;
                        widget.toast('服务器异常')
                    }
                })
            },
            //获取银行列表
            bankPicker(){
                let that = this
                let bankName = []
                that.bankList.forEach((obj) =>{
                    bankName.push(obj.name)
                })
                let bankData = {
                    data1: bankName,
                }
                clientUi.showPicker(bankData, that.select, "请选择", (data) => {
                  
                    if(data.data1 !== undefined){
                        that.selectValue = bankName[data.data1];
                        that.showPlaceholder = false
                    }
                    
                })
                
            },
            changeName(val,target){
                let znVal = val.replace(/[^\u4E00-\u9FA5\·]/g,'')
                target.value = znVal;
                this.bankUserName = znVal;
            },
            changeCard(val,_this){
                let newVal = val.replace(/\D/g,'')
                this.bankNum = newVal.replace(/\s/g,'');
                let _selectionEnd = _this.selectionEnd,
                    strBeforeCursor = newVal.slice(0,_selectionEnd),
                    strNoSpaceLength = strBeforeCursor.replace(/\s/g, '').length,
                    spaceCount = _selectionEnd - strNoSpaceLength,
                    newCursorPosition =  _selectionEnd + (strNoSpaceLength-1)/4 - spaceCount;
                if(_selectionEnd!=0){
                    _this.value = newVal.replace(/\s/g, '').replace(/(\w{4})(?=\w)/g, "$1 ").toUpperCase();
                    setTimeout(function(){
                        _this.setSelectionRange(newCursorPosition, newCursorPosition);
                    },0)
                }
                //this.inputValue = val.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
            }
        },
        computed:{
            valChange:function(){
                return '' + this.selectValue + this.bankNum + this.bankUserName
            }
        },
        watch:{
            valChange:function(){
                if(this.selectValue && this.bankNum && this.bankUserName){
                    this.disablebtn = false;
                }else{
                    this.disablebtn = true;
                }
            }
        },
        created(){
            this.init();    
            commonPage.updateTitleBar({
                backAction: 'goBack',
                leftAction: 'goBack'
            })
            window.goBack = () => {
                // location.href = "dmsaas://WithdrawalWay"
                cache.getMemoryCache('yyWithdrayalwayWebViewID',function(data){
                    if(data){
                        commonPage.goBack(1, {}, data.webViewID)
                    }
                })
            }     
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/base.css"></style>



